<template>
  <div>
    <el-container>
      <el-header>
        <img id="logo" src="../assets/images/logo.jpg" alt=""/>
        <div id="loginmsg">
          <el-button id="back" type="text" @click="mine()" style="color: #222222">← 返回小黑书</el-button>
          <div id="user">
            <img id="uimg" :src="profileImg" alt=""/>
            <p id="uname">{{ name }}</p>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <div id="navbar">
            <el-menu
                router
                :default-active="active"
                class="el-menu-vertical-demo"
                background-color="black"
                text-color="white"
                active-text-color="red"
                style="width: 256px; border-right: none"
            >
              <el-menu-item index="user">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="channel">
                <i class="el-icon-menu"></i>
                <span slot="title">频道管理</span>
              </el-menu-item>
              <el-menu-item index="message">
                <i class="el-icon-chat-line-round"></i>
                <span slot="title">消息监控</span>
              </el-menu-item>
              <el-menu-item index="note">
                <i class="el-icon-document"></i>
                <span slot="title">笔记监控</span>
              </el-menu-item>
              <el-menu-item index="statistics">
                <i class="el-icon-data-line"></i>
                <span slot="title">用量统计</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    //查询当前登录用户
    check() {
      let url = `/api/lzs/user/detail?userId=`;
      this.http.get(url).then((res) => {
        this.name = res.data.data.name;
        this.profileImg = res.data.data.profileImg;
      });
    },
    //设置当前项路由
    setCurrentRoute() {
      let url = this.$route.path.split('/')
      // console.log(url)
      this.active = url[url.length - 1]
    },
    //返回我的主页
    mine() {
      this.$router.push("/homepage")
    }
  },
  data() {
    return {
      profileImg: '',
      name: '',
      active: 'user',
    };
  },
  mounted() {
    this.setCurrentRoute();
    this.check();
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#logo {
  height: 100%;
  width: 256px;
  float: left;
  margin-left: 20px;
}
#loginmsg {
  display: flex;
  //flex-direction: row-reverse;
  margin: 15px;
  justify-content: space-between;

  #back {
    margin: 0 50px 0 30px;
  }
  #user {
    margin-right: 2vw;
    #uimg {
      border-radius: 50%;
      height: 30px;
      margin-right: 5px;
      display: inline-block;
    }

    #uname {
      // position: fixed;
      // right: 1vw;
      display: inline-block;
      text-align: center;
      line-height: 30px;
    }
  }
}

#navbar {
  width: 256px;
  height: 100%;
  background-color: black;
  padding-left: 0;
  margin-left: 20px;
}
</style>
